<template>
    <FormItem :label="`${itemData.label}：`"
              :prop="propName">
        <template v-if="itemData.type === 'inputNumberRange'">
            <Row>
                <Col span="10">
                <FormItem :label-for="itemData.valueArr[0].name">
                    <InputNumber :max="itemData.valueArr[0].max"
                                 :min="itemData.valueArr[0].min"
                                 :placeholder="itemData.valueArr[0].placeholder"
                                 :element-id="itemData.valueArr[0].name"
                                 :readonly="itemData.valueArr[0].readonly"
                                 v-model="formData[itemData.valueArr[0].name]"
                                 @on-change="handleInputChange(itemData.valueArr[0].value, itemData.valueArr[0].name)"
                                 style="width:100%"></InputNumber>
                </FormItem>
                </Col>
                <Col span="4"
                     class="qw-text-c">-</Col>
                <Col span="10">
                <FormItem :prop="itemData.valueArr[1].name"
                          :label-for="itemData.valueArr[1].name">
                    <InputNumber :max="itemData.valueArr[1].max"
                                 :min="itemData.valueArr[1].min"
                                 :placeholder="itemData.valueArr[1].placeholder"
                                 :element-id="itemData.valueArr[1].name"
                                 :readonly="itemData.valueArr[1].readonly"
                                 v-model="formData[itemData.valueArr[1].name]"
                                 @on-change="handleInputChange"
                                 style="width:100%"></InputNumber>
                </FormItem>
                </Col>
            </Row>
        </template>
        <template v-else-if="itemData.type === 'inputNumber'">
            <FormItem :label-for="itemData.name">
                <InputNumber :max="itemData.max"
                             :min="itemData.min"
                             :placeholder="itemData.placeholder"
                             :disabled="itemData.disabled?itemData.disabled:false"
                             :element-id="itemData.name"
                             :readonly="itemData.readonly"
                             v-model="formData[itemData.name]"
                             @on-change="handleInputChange"
                             style="width:100%"></InputNumber>
            </FormItem>
        </template>
    </FormItem>
</template>
<script>
    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            }
        },
        data () {
            return {
                propName: '', // 校验规则名称
                dataList: []
            }
        },
        created () {
            if (this.itemData.type === 'inputRange') {
                this.propName = this.itemData.valueArr[0].name;
            } else {
                this.propName = this.itemData.name;
            }
        },
        methods: {
            handleInputChange (val, name) {
                this.$emit('handleChangeFormData', this.formData);
            }
        }
    }
</script>
